<template>
  <view>
    <!-- 搜索页面 -->
    <mySearch @click='goToSearch'></mySearch>
    <view class="box">
      <!-- 左边数据 -->
      <scroll-view scroll-y class="cateMenu " :style="{ height: wh + 'px' }">
        <view :class="{ active: currtIndex === index }" @click="changeInde(index)" class="menuItem" v-for="(item, index) in MenuList" :key="item.cat_id">{{ item.cat_name }}</view>
      </scroll-view>
      <!-- 右边数据 -->
      <scroll-view scroll-y :scroll-top="scrollTop" class="cateDetail" :style="{ height: wh + 'px' }">
        <view v-for="(item, index) in cateLevel2" :key="index">
          <!-- 标题 -->
          <view class="title">/ {{ item.cat_name }} /</view>
          <!-- 商品详情 -->
          <view class="imgBox">
            <view class="img" v-for="(sub, index2) in item.children" :key="index2" @click="toGoodList(sub.cat_name)">
              <image :src="sub.cat_icon" mode="aspectFit"></image>
              <text>{{ sub.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import mySearch from '../../components/my-search/my-search.vue';
import cartTotal from "../../mixins/cartTotal.js"
export default {
   mixins:[cartTotal],
  components: {
    mySearch
  },
  data() {
    return {
      wh: 0, //屏幕的可使用高度
      currtIndex: 0, //默认选中的样式
      MenuList: [], //左边一级的数据
      cateLevel2: [], //左边二级的数据
      scrollTop: 0 //重置滚动条
    };
  },
  onLoad() {
    // 获取可使用屏幕的高度
    uni.getSystemInfo({
      success: res => {
        this.wh = res.windowHeight - 56;
      }
    });
    // 获取左边的数据
    this.getMenuList();
  },
  methods: {
    // 点击那个下标，那个样式高亮
    changeInde(index) {
      this.currtIndex = index;
      this.cateLevel2 = this.MenuList[index].children;
      this.scrollTop = this.scrollTop === 0 ? 1 : 0;
    },
    // 获取左边的数据
    async getMenuList() {
      const { data: res } = await uni.$http.get('/api/public/v1/categories');
      this.MenuList = res.message;
      this.cateLevel2 = this.MenuList[0].children;
    },
    // 跳转到商品详情
    toGoodList(name) {
      uni.navigateTo({
        url: `/pages/goods_list/goods_list?query=${name}`
      });
    },
    // 跳转到搜索页面
    goToSearch(){
      uni.navigateTo({
        url:'/pages/search/search'
      })
    }
  }
};
</script>

<style lang="scss">
.box {
  display: flex;
  .cateMenu {
    width: 120px;
    background-color: #f7f7f7;
  }
  .menuItem {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 14px;
  }
  .active {
    position: relative;
    background-color: #fff;
    &::before {
      content: '';
      display: block;
      width: 3px;
      height: 40px;
      background-color: #c00000;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 3px;
    }
  }
  .cateDetail {
    flex: 1;
  }
}
.title {
  height: 40px;
  width: 100%;
  text-align: center;
  font-weight: 700;
  margin-top: 20px;
}
.imgBox {
  display: flex;
  flex-wrap: wrap;
}
.img {
  width: 33.33%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  image {
    width: 60%;
    height: 60%;
  }
  text {
    font-size: 12px;
  }
}
</style>
